<template>
    <div class="rootMain">
        <el-form label-position="right" label-width="120px">
            <el-form-item label="选择办税地点">
                <el-select
                    v-model="provincesIndex"
                    placeholder="请选择"
                    @change="provincesChange"
                >
                    <el-option
                        v-for="(item, index) in provinces"
                        :key="index"
                        :label="item.unitdz"
                        :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-calendar v-model="todayMonth2"> </el-calendar>
        <div class="rili">
            <el-descriptions title="" :column="1">
                <el-descriptions-item
                    v-for="(item, index) in dataList"
                    :key="index"
                >
                    <template
                        v-if="
                            changeMonth < endMonth(item.bsjssj) &&
                            changeMonth > startMonth(item.bskssj)
                        "
                        slot="label"
                    >
                        {{ firstDay(todayMonth) }}日-{{ lastDay(todayMonth) }}日
                    </template>
                    <template
                        v-if="
                            changeMonth < endMonth(item.bsjssj) &&
                            changeMonth == startMonth(item.bskssj)
                        "
                        slot="label"
                    >
                        {{ startTime(item.bskssj) }}日-{{
                            lastDay(todayMonth)
                        }}日
                    </template>
                    <template
                        v-if="
                            changeMonth == endMonth(item.bsjssj) &&
                            changeMonth > startMonth(item.bskssj)
                        "
                        slot="label"
                    >
                        01日-{{ endTime(item.bsjssj) }}日
                    </template>
                    <template
                        v-if="
                            changeMonth == startMonth(item.bskssj) &&
                            changeMonth == endMonth(item.bsjssj)
                        "
                        slot="label"
                    >
                        {{ startTime(item.bskssj) }}日-{{
                            endTime(item.bsjssj)
                        }}日
                    </template>
                    <span>
                        {{ item.bssz }}
                    </span>
                    <span class="color999">
                        {{ item.bz }}
                    </span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
import { provinces } from "@/assets/utils/provinces.js";
import moment from "moment";
import { getCalendarListForMonth } from "@/assets/api/indexApi";
export default {
    name: "taxcount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            provincesIndex: 0,
            ssjg: "111000000",
            provinces: provinces,
            todayMonth: "",
            todayMonth2: "",
            changeMonth: "",
            dataList: [],
            startTime(date) {
                return moment(date).format("DD");
            },

            endTime(date) {
                return moment(date).format("DD");
            },

            startMonth(date) {
                return moment(date).format("MM");
            },

            endMonth(date) {
                return moment(date).format("MM");
            },

            firstDay(date) {
                return moment(date).startOf("month").format("DD");
            },

            lastDay(date) {
                return moment(date).endOf("month").format("DD");
            },
        };
    },
    watch: {
        todayMonth: function (n, o) {
            this.getList();
        },
    },
    created() {
        this.todayMonth = moment().format("YYYY-MM");
        this.todayMonth2 = moment().format("YYYY-MM");
        this.changeMonth = moment().format("MM");
    },
    mounted() {
        // this.getList();
    },
    computed: {},
    methods: {
        message(m) {
            this.$message({
                message: m,
                type: "warning",
            });
        },
        async getList() {
            const res = await getCalendarListForMonth({
                ssjg: this.ssjg,
                bssj: moment(this.todayMonth).format("YYYY-MM"),
            });
            this.dataList = res.json.list;
        },
        //选择办税地点
        provincesChange(e) {
            this.provincesIndex = e;
            this.ssjg = this.provinces[e].unitcode;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}
.color999 {
    color: #999;
}
</style>
